<template>
  <div v-loading="loading">
    <el-form :model="shopForm" :rules="shopRules" ref="shopForm" label-width="135px">
      <el-tabs type="border-card" v-model="tableName" ref="tabs">
        <el-tab-pane label="基本信息" name="base">
          <el-row>
            <el-col :span="6">
              <el-form-item label="公司名称" prop="company_name">
                <el-input v-model="shopForm.company_name" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公司地址" prop="company_address">
                <el-input v-model="shopForm.company_address" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公司电话" prop="company_phone">
                <el-input v-model="shopForm.company_phone" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="员工总数" prop="employee_num">
                <el-input-number v-model="shopForm.employee_num" :min="1" :max="99999999"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="注册资金" prop="reg_money">
                <el-input v-model="shopForm.reg_money">
                  <template slot="append">万</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系姓名" prop="link_name">
                <el-input v-model="shopForm.link_name" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话" prop="link_phone">
                <el-input v-model="shopForm.link_phone" :maxlength="11"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电子邮箱" prop="company_email">
                <el-input v-model="shopForm.company_email" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="自营店铺" prop="self_operated">
                <el-radio-group v-model="shopForm.self_operated">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="营业执照信息" name="legal">
          <el-row>
            <el-col :span="6">
              <el-form-item label="开店人姓名" prop="legal_name">
                <el-input v-model="shopForm.legal_name" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开店人身份证号" prop="legal_id">
                <el-input v-model="shopForm.legal_id" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="营业执照号" prop="license_num">
                <el-input v-model="shopForm.license_num" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="法定经营范围" prop="scope">
                <el-input v-model="shopForm.scope" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="成立日期" prop="establish_date">
                <el-date-picker
                  class="license-date"
                  v-model="shopForm.establish_date"
                  type="date"
                  align="center"
                  :editable="false"
                  value-format="timestamp"
                  :picker-options="{ disabledDate(time) { return time.getTime() > Date.now() } }">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="营业执照有效期" prop="licence_start">
                <el-date-picker
                  class="license-date"
                  v-model="shopForm.licence_start"
                  type="date"
                  align="center"
                  :editable="false"
                  value-format="timestamp"
                  :picker-options="{
                    disabledDate(time) {
                      if (shopForm.licence_end) return time.getTime() > shopForm.licence_end
                    }
                  }">
                </el-date-picker>
                <span>至</span>
                <el-date-picker
                  class="license-date"
                  v-model="shopForm.licence_end"
                  type="date"
                  align="center"
                  :editable="false"
                  value-format="timestamp"
                  :picker-options="{
                    disabledDate(time) {
                      if (shopForm.licence_start) return time.getTime() < shopForm.licence_start
                    }
                  }">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="营业执照所在地" prop="license_region">
                <en-region-picker :api="MixinRegionApi" :default="defaultRegionLicense" @changed="regionChange($event, 'license_region')"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="营业执照详细地址 " prop="license_add">
                <el-input v-model="shopForm.license_add" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="身份证正面照" prop="legal_img">
            <el-upload
              class="avatar-uploader"
              :action="MixinUploadApi"
              :show-file-list="false"
              :on-success="(res) => { shopForm.legal_img = res.url }">
              <img v-if="shopForm.legal_img" :src="shopForm.legal_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <a v-if="shopForm.legal_img" :href="shopForm.legal_img" target="_blank" class="see-original">查看原图</a>
          </el-form-item>
          <el-form-item label="身份证反面照" prop="legal_back_img">
            <el-upload
              class="avatar-uploader"
              :action="MixinUploadApi"
              :show-file-list="false"
              :on-success="(res) => { shopForm.legal_back_img = res.url }">
              <img v-if="shopForm.legal_back_img" :src="shopForm.legal_back_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <a v-if="shopForm.legal_back_img" :href="shopForm.legal_back_img" target="_blank" class="see-original">查看原图</a>
          </el-form-item>
          <el-form-item label="手持身份证正面照" prop="hold_img">
            <el-upload
              class="avatar-uploader"
              :action="MixinUploadApi"
              :show-file-list="false"
              :on-success="(res) => { shopForm.hold_img = res.url }">
              <img v-if="shopForm.hold_img" :src="shopForm.hold_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <a v-if="shopForm.hold_img" :href="shopForm.hold_img" target="_blank" class="see-original">查看原图</a>
          </el-form-item>
          <el-form-item label="营业执照" prop="licence_img">
            <el-upload
              class="avatar-uploader"
              :action="MixinUploadApi"
              :show-file-list="false"
              :on-success="(res) => { shopForm.licence_img = res.url }">
              <img v-if="shopForm.licence_img" :src="shopForm.licence_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <a v-if="shopForm.licence_img" :href="shopForm.licence_img" target="_blank" class="see-original">查看原图</a>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="组织机构信息" name="organization">
          <el-row>
            <el-col :span="6">
              <el-form-item label="组织机构代码" prop="organization_code">
                <el-input v-model="shopForm.organization_code" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="组织机构代码证件" prop="code_img">
            <el-upload
              class="avatar-uploader"
              :action="MixinUploadApi"
              :show-file-list="false"
              :on-success="(res) => { shopForm.code_img = res.url }">
              <img v-if="shopForm.code_img" :src="shopForm.code_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <a v-if="shopForm.code_img" :href="shopForm.code_img" target="_blank" class="see-original">查看原图</a>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="开户行银行许可证" name="bank">
          <el-row>
            <el-col :span="6">
              <el-form-item label="银行开户名" prop="bank_account_name">
                <el-input v-model="shopForm.bank_account_name" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公司银行账号" prop="bank_number">
                <el-input v-model="shopForm.bank_number" :maxlength="24"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开户银行支行名称" prop="bank_name">
                <el-input v-model="shopForm.bank_name" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开户行所在地" prop="bank_region">
                <en-region-picker :api="MixinRegionApi" :default="defaultRegionBank" @changed="(object) => { shopForm.bank_region = object.last_id }"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="开户行许可证" prop="bank_img">
            <el-upload
              class="avatar-uploader"
              :action="MixinUploadApi"
              :show-file-list="false"
              :on-success="(res) => { shopForm.bank_img = res.url }">
              <img v-if="shopForm.bank_img" :src="shopForm.bank_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <a v-if="shopForm.bank_img" :href="shopForm.bank_img" target="_blank" class="see-original">查看原图</a>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="税务登记证" name="taxes">
          <el-row>
            <el-col :span="6">
              <el-form-item label="税务登记证号">
                <el-input v-model="shopForm.taxes_certificate_num" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="纳税人识别号" prop="taxes_distinguish_num">
                <el-input v-model="shopForm.taxes_distinguish_num" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="一般纳税人证明" prop="taxes_img">
            <el-upload
              class="avatar-uploader"
              :action="MixinUploadApi"
              :show-file-list="false"
              :on-success="(res) => { shopForm.taxes_img = res.url }">
              <img v-if="shopForm.taxes_img" :src="shopForm.taxes_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <a v-if="shopForm.taxes_img" :href="shopForm.taxes_img" target="_blank" class="see-original">查看原图</a>
          </el-form-item>
          <el-form-item label="税务登记证" prop="taxes_certificate_img">
            <el-upload
              class="avatar-uploader"
              :action="MixinUploadApi"
              :show-file-list="false"
              :on-success="(res) => { shopForm.taxes_certificate_img = res.url }">
              <img v-if="shopForm.taxes_certificate_img" :src="shopForm.taxes_certificate_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <a v-if="shopForm.taxes_certificate_img" :href="shopForm.taxes_certificate_img" target="_blank" class="see-original">查看原图</a>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="店铺信息" name="shop">
          <el-row>
            <el-col :span="6">
              <el-form-item label="店铺名称" prop="shop_name">
                <el-input v-model="shopForm.shop_name" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="佣金比例" prop="shop_commission">
                <el-input v-model="shopForm.shop_commission" :maxlength="50">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="配送服务类型" prop="ship_type">
                <el-checkbox-group v-model="shopForm.ship_type">
                  <el-checkbox label="1">全国/快递</el-checkbox>
                  <el-checkbox label="2">本地/同城配送</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合作模式" prop="cooperation_mode">
                <dg-select
                  dictType="COOPERATION_MODE"
                  clearable
                  placeholder="请选择"
                  v-model="shopForm.cooperation_mode"
                  :defaultValue="shopForm.cooperation_mode"
                ></dg-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="店铺地址" prop="shop_region">
                <en-region-picker :api="MixinRegionApi" :default="defaultRegionShop" @changed="regionChange($event, 'shop_region')"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="店铺详细地址" prop="shop_add">
                <el-input v-model="shopForm.shop_add"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="平台补贴" prop="shop_add">
                <el-input size="medium" v-model="shopForm.subsidy_rate" clearable>
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结算方式" prop="SETTLEMENT_METHOD">
                <dg-select
                  dictType="SETTLEMENT_METHOD"
                  clearable
                  placeholder="请选择"
                  v-model="shopForm.settlement_method"
                  :defaultValue="shopForm.settlement_method"
                ></dg-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="店铺经营类型" prop="shop_type">
                <dg-select
                  dictType="SHOP_TYPE"
                  clearable
                  placeholder="请选择"
                  v-model="shopForm.shop_type"
                  :defaultValue="shopForm.shop_type"
                ></dg-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="地图点位：" prop="shop_map">
                <div class="map">
                  <div id="mapContainer" style="height: 400px"></div>
                  <input type="text" id="mapInput" class="map-search" placeholder="请输入店铺地址" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="店铺logo" prop="shop_logo">
            <el-upload
              class="avatar-uploader"
              :action="MixinUploadApi"
              :show-file-list="false"
              :on-success="(res) => { shopForm.shop_logo = res.url }">
              <img v-if="shopForm.shop_logo" :src="shopForm.shop_logo" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <a v-if="shopForm.shop_logo" :href="shopForm.shop_logo" target="_blank" class="see-original">查看原图</a>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="经营类目" name="category">
          <el-form-item label="经营类目" prop="goods_management_category" class="form-item-cat">
            <el-checkbox :indeterminate="isIndeterminateCat" v-model="checkAllCat" @change="handleCheckAllCatChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="shopForm.goods_management_category" @change="handleCheckedCatsChange">
              <el-checkbox v-for="cat in categorys" :label="cat.id" :key="cat.id">{{ cat.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="店铺类型" name="shop_tag">
          <el-form-item label="店铺类型" prop="shop_tag" class="form-item-cat">
            <el-checkbox :indeterminate="isIndeterminateShopTag" v-model="checkAllShopTag" @change="handleCheckAllShopTag">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="shopForm.shop_tag" @change="handleCheckedShopTag">
              <el-checkbox v-for="(item, index) in shopTagOptions" :label="item.mark" :key="index">{{ item.tag_name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <div class="save-btn-box">
        <el-button type="primary" @click="handleSaveEdit">{{ isAudit ? '通过并保存' : '保存修改'}}</el-button>
        <el-button v-if="isAudit" type="danger" @click="handleRefusePass">拒绝通过</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import AMap from 'AMap'
  import * as API_Shop from '@/api/shop'
  import * as API_Category from '@/api/category'
  import { RegExp } from '~/ui-utils'
  let map = null // 地图
  let marker = null // 自定义标记点
  let useLnglat = null // 当前经纬度

  export default {
    name: 'shopEdit',
    data() {
      return {
        tableName: 'base',
        shop_id: this.$route.params.id,
        isAudit: !!this.$route.query.audit,
        loading: false,
        shopForm: {},
        shopRules: {
          // shop_name: [
          //   this.MixinRequired('店铺名称不能为空！')
          // ],
          // shop_commission: [
          //   this.MixinRequired('店铺佣金比例不能为空！')
          // ],
          // shop_map: [
          //   { required: false, message: '请设置有效的地图点位！', trigger: 'change' }
          // ],
          // shop_logo: [
          //   this.MixinRequired('请上传店铺logo！')
          // ],
          // ship_type: [
          //   this.MixinRequired('请选择配送服务类型！')
          // ],
          // goods_management_category: [
          //   this.MixinRequired('请选择店铺经营类目！')
          // ],
          // shop_tag: [
          //   this.MixinRequired('请选择店铺类型！')
          // ]
          shop_type: [
            this.MixinRequired('请选择店铺经营类型')
          ]
        },
        isIndeterminateCat: false,
        checkAllCat: false,
        categorys: [],
        isIndeterminateShopTag: false,
        checkAllShopTag: false,
        shopTagOptions: [],
        defaultRegionLicense: null,
        defaultRegionBank: null,
        defaultRegionShop: null
      }
    },
    mounted() {
      this.initMemberInfo()
    },
    beforeRouteUpdate(to, from, next) {
      this.shop_id = to.params.id
      this.isAudit = !!to.query.audit
      next()
    },
    activated() {
      this.shop_id = this.$route.params.id
    },
    watch: {
      shop_id: function() {
        this.initMemberInfo()
        this.shopForm = {}
      }
    },
    methods: {
      /*
        * @date 2020-03-12
        * @author wolfMan
        * @description {地址选择器切换}
      */
      regionChange(object, name) {
        this.shopForm[name] = object.last_id
        this.$refs.shopForm.validateField([name])
      },
      /*
        * @date 2020-02-16
        * @author wolfMan
        * @description {初始化地图}
      */
      initMap() {
        // 初始化地图
        map = new AMap.Map('mapContainer', {
          resizeEnable: true,
          zoom: 16
        })
        // 生成自定义标记点
        marker = new AMap.Marker({
          position: map.getCenter(),
          cursor: 'move',
          raiseOnDrag: true, // 标记点拖拽
          offset: new AMap.Pixel(-13, -30) // 以 icon 的 [center bottom] 为原点
        })
        // 生成地图内自动填充输入框
        const placeSearch = new AMap.PlaceSearch({ map: map })
        marker.setMap(map)
        // map点击事件生成自定义标记点
        map.on('click', (e) => {
          this.setAddress(e.lnglat)
          marker.setPosition(e.lnglat)
        })
        // 点击标记点选择地址
        placeSearch.on('markerClick', (e) => {
          this.setAddress(e.event.lnglat)
        })
        // 添加插件到map上
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.PlaceSearch'], function() {
          map.addControl(new AMap.PlaceSearch())
          map.addControl(new AMap.ToolBar())
          map.addControl(new AMap.Scale())
        })
      },
      /*
        * @date 2020-02-16
        * @author wolfMan
        * @description {设置地图标点}
      */
      showMapMarker(_lnglat) {
        map.setCenter(_lnglat)
        marker.setPosition(_lnglat)
      },
      /*
        * @date 2020-02-16
        * @author wolfMan
        * @description {自动填充地址}
      */
      setAddress(lnglat) {
        const geocoder = new AMap.Geocoder()
        geocoder.getAddress(lnglat, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            const {
              regeocode: {
                formattedAddress,
                addressComponent: { province, city, district }
              }
            } = result
            this.$set(this.shopForm, 'shop_lng', lnglat.lng)
            this.$set(this.shopForm, 'shop_lat', lnglat.lat)
            this.$set(this.shopForm, 'shop_map', [lnglat.lng, lnglat.lat])
          }
        })
      },
      /*
        * @date 2019-12-06
        * @author wolfMan
        * @description {自动匹配地址选项}
      */
      initAutocomplete() {
        const mapAutoComplete = new AMap.Autocomplete({ input: 'mapInput' })
        mapAutoComplete.on('select', (res) => {
          if (res.poi.location) {
            const _location = res.poi.location
            this.setAddress(_location)
            let _position = new AMap.LngLat(_location.lng, _location.lat)
            this.showMapMarker(_position)
          } else {
            this.$message.warning('您选择的地址不是一个具体的地址')
          }
        })
      },

      /** 经营类目全选 */
      handleCheckAllCatChange(val) {
        this.shopForm.goods_management_category = val ? this.categorys.map(item => item.id) : []
        this.isIndeterminateCat = false
      },

      /** 经营类目选择 */
      handleCheckedCatsChange(value) {
        let checkedCount = value.length
        this.checkAllCat = checkedCount === this.categorys.length
        this.isIndeterminateCat = checkedCount > 0 && checkedCount < this.categorys.length
      },

      /** 店铺类型全选 */
      handleCheckAllShopTag(val) {
        this.shopForm.shop_tag = val ? this.shopTagOptions.map(item => item.mark) : []
        this.isIndeterminateShopTag = false
      },
      /** 店铺类型选择 */
      handleCheckedShopTag(value) {
        let checkedCount = value.length
        this.checkAllShopTag = checkedCount === this.checkAllShopTag.length
        this.isIndeterminateShopTag = checkedCount > 0 && checkedCount < this.isIndeterminateShopTag.length
      },
      /** 保存修改 */
      handleSaveEdit() {
        this.$refs['shopForm'].validate((valid, error) => {
          if (valid) {
            const params = this.MixinClone(this.shopForm)
            if (this.isAudit) {
              params.pass = 1
            }
            params.licence_start /= 1000
            params.licence_end /= 1000
            params.establish_date /= 1000
            API_Shop.editAuthShop(this.shop_id, params).then(response => {
              if (this.isAudit) {
                this.$message.success('审核通过！')
                this.isAudit = false
              } else {
                this.$message.success('修改成功！')
              }
              const { callback } = this.$route.params
              typeof callback === 'function' && callback()
              this.$store.dispatch('delCurrentViews', {
                view: this.$route,
                $router: this.$router
              })
            })
          } else {
            this.$message.error('表单填写有误，请核对！')
            // 找到出错的第一个tab
            // 再将tab切换过去
            const firstError = Object.keys(error)[0]
            let tabChildren = this.$refs['tabs'].$children
            for (let i = 0; i < tabChildren.length; i++) {
              const item = tabChildren[i]
              let finded = false
              for (let j = 0; j < item.$children.length; j++) {
                if (item.$children[j].prop === firstError) {
                  this.tableName = item.name
                  finded = true
                  break
                }
              }
              if (finded) break
            }
            return false
          }
        })
      },
      /** 拒绝通过 */
      handleRefusePass() {
        this.$confirm('确定该店铺拒绝通过吗？', '提示', { type: 'warning' }).then(() => {
          const params = this.MixinClone(this.shopForm)
          params.pass = 0
          API_Shop.editAuthShop(this.shop_id, params).then(response => {
            this.$message.success('已拒绝该店铺！')
            const { callback } = this.$route.params
            typeof callback === 'function' && callback()
            this.$store.dispatch('delCurrentViews', {
              view: this.$route,
              $router: this.$router
            })
          })
        }).catch(() => {})
      },
      /** 初始化会员信息 */
      initMemberInfo() {
        Promise.all([
          API_Shop.getShopDetail(this.shop_id),
          API_Category.getCategoryChildren(),
          API_Shop.getShopTags()
        ]).then(async responses => {
          const shopInfo = responses[0]
          const categorys = responses[1]
          const shopTagOptions = responses[2]
          await this.initMap() // 初始化地图
          // 设置店铺信息
          shopInfo.license_region = shopInfo.license_region ? shopInfo.license_region : null// 地图点位
          let _shop_map = []
          const _lng = shopInfo.shop_lng
          const _lat = shopInfo.shop_lat
          if (_lng || _lat) {
            let _position = new AMap.LngLat(_lng, _lat)
            this.showMapMarker(_position)
            _shop_map = [_lng, _lat]
          }
          shopInfo.shop_map = _shop_map
          this.initAutocomplete()
          this.shopForm = this.MixinClone(shopInfo)
          this.shopForm.licence_start *= 1000
          this.shopForm.licence_end *= 1000
          this.shopForm.establish_date *= 1000
          const {
            license_province_id, license_city_id, license_county_id, license_town_id,
            bank_province_id, bank_city_id, bank_county_id, bank_town_id,
            shop_province_id, shop_city_id, shop_county_id, shop_town_id
          } = shopInfo
          this.defaultRegionLicense = [license_province_id, license_city_id, license_county_id, license_town_id]
          this.defaultRegionBank = [bank_province_id, bank_city_id, bank_county_id, bank_town_id]
          this.defaultRegionShop = [shop_province_id, shop_city_id, shop_county_id, shop_town_id]

          this.shopForm.ship_type = []
          if (shopInfo.ship_type) {
            const _shopType = shopInfo.ship_type.split(',')
            this.shopForm.ship_type = _shopType
          }

          this.shopForm.goods_management_category = []
          if (shopInfo.goods_management_category) {
            const _categorys = shopInfo.goods_management_category.split(',')
            this.shopForm.goods_management_category = _categorys
            if (_categorys.length !== 0) {
              if (_categorys.length < categorys.length) {
                this.isIndeterminateCat = true
              } else if (_categorys.length === categorys.length) {
                this.checkAllCat = true
              }
            }
          }
          // 设置经营类目
          this.categorys = categorys.map(item => ({
            id: String(item.category_id),
            name: item.name
          }))

          this.shopForm.shop_tag = []
          if (shopInfo.shop_tag) {
            const _shopTags = shopInfo.shop_tag.split(',')
            this.shopForm.shop_tag = _shopTags
            if (_shopTags.length !== 0) {
              if (_shopTags.length < shopTagOptions.length) {
                this.isIndeterminateShopTag = true
              } else if (_shopTags.length === shopTagOptions.length) {
                this.checkAllShopTag = true
              }
            }
          }
          // 设置店铺类型
          this.shopTagOptions = shopTagOptions.map(item => ({
            mark: item.mark,
            tag_name: item.tag_name
          }))
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  /deep/ .el-form-item--small {
    .el-form-item__content {
      .el-input {
        line-height: 0;
      }
    }
  }
  /deep/ .app-address {
    width: 100% !important;
    height: 32px;
    .app-address-title {
      padding: 0 20px 0 15px;
      height: 32px;
      line-height: 32px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
    }
  }
  /deep/ .is-success {
    .app-address {
      .app-address-title {
        border-color: #67c23a;
      }
    }
  }
  /deep/ .is-error {
    .app-address {
      .app-address-title {
        border-color: #f56c6c;
      }
    }
  }
  /deep/ .map {
    position: relative;
    width: 500px;
    .map-search {
      position: absolute;
      top: 15px;
      right: 15px;
      padding: 5px 10px;
      width: 300px;
      line-height: 22px;
      border: none;
      border-radius: 4px;
      outline: none;
      box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
      overflow: hidden;
    }
  }

  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    &:hover {
      border-color: #409eff
    }
  }

  /deep/ .avatar-uploader {
    width: 180px;
    height: 180px;
    img { width: 100%; height: 100% }
  }
  /deep/ .avatar-uploader .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  /deep/ .el-tabs__content {
    overflow: inherit;
  }

  .save-btn-box {
    text-align: center;
    background-color: #fff;
    padding: 10px 0;
    border: 1px solid #dcdfe6;
    border-top: 0;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
  }
  /deep/ .form-item-cat .el-form-item__content { width: auto }
  .see-original {
    font-size: 12px;
    color: #006db7;
    &:hover { color: #F00 }
  }
  .license-date {
    width: 180px;
  }
</style>
